import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_light_dark_demo/Utils/Data/Data.dart';
import 'package:flutter_light_dark_demo/Utils/constant.dart';
/**
 * Create by laoge
 * on 2021/5/6 0006
 */

class MainPgae extends StatefulWidget {
  @override
  _MainPgae createState() {
    return _MainPgae();
  }
}

class _MainPgae extends State<MainPgae> with TickerProviderStateMixin {
  TabController _tabController;

  List data = [];
  int page = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    data = blblData;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          elevation: 0,
          title: Row(
            children: [
              Builder(
                builder: (context) {
                  return GestureDetector(
                    onTap: () {
                      Scaffold.of(context).openDrawer();
                    },
                    child: ClipRRect(
                      borderRadius:
                          BorderRadius.all(Radius.circular(kToolbarHeight / 2)),
                      child: Image.asset(
                        "assets/images/avater.jpg",
                        height: kToolbarHeight * 2 / 3,
                      ),
                    ),
                  );
                },
              ),
              SizedBox(
                width: mDefaultPadding,
              ),
              Expanded(
                child: Container(
                  alignment: Alignment.centerLeft,
                  padding: EdgeInsets.only(left: mDefaultPadding / 4),
                  decoration: BoxDecoration(
                      color: Theme.of(context).scaffoldBackgroundColor,
                      borderRadius:
                          BorderRadius.all(Radius.circular(kToolbarHeight / 2)),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.grey.withOpacity(0.5),
                            blurRadius: 5,
                            offset: Offset(0, 0))
                      ]),
                  child: Icon(
                    Icons.search,
                    color: Theme.of(context).iconTheme.color.withOpacity(0.7),
                  ),
                ),
              ),
              SizedBox(
                width: mDefaultPadding,
              ),
              Icon(
                Icons.message,
                color: Theme.of(context).iconTheme.color.withOpacity(0.7),
              ),
              SizedBox(
                width: mDefaultPadding,
              ),
              Icon(
                Icons.favorite,
                color: Theme.of(context).iconTheme.color.withOpacity(0.7),
              ),
            ],
          ),
        ),
        drawer: GestureDetector(
          onTap: (){
            Navigator.pop(context);
          },
          child: Container(
            color: Theme.of(context).scaffoldBackgroundColor,
            padding: EdgeInsets.only(right: mDefaultPadding,left: mDefaultPadding),
            width: MediaQuery.of(context).size.width - 50,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  height: mDefaultPadding*4,
                ),
                Padding(
                  padding: EdgeInsets.all(mDefaultPadding),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(50),
                    child: Image.asset(
                      "assets/images/avater.jpg",
                      width: 100,
                    ),
                  ),
                ),
                SizedBox(height: mDefaultPadding*3,),
                Container(
                  padding: EdgeInsets.all( mDefaultPadding),
                  // decoration: BoxDecoration(
                  //   border: Border(top: BorderSide(color: Colors.grey,width: 1))
                  // ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.message,
                        size: 20,
                        color: Theme.of(context).iconTheme.color.withOpacity(0.7),
                      ),
                      SizedBox(width: mDefaultPadding,),
                      Text("消息",style: Theme.of(context).textTheme.headline6,)
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.all( mDefaultPadding),
                  // decoration: BoxDecoration(
                  //     border: Border(top: BorderSide(color: Colors.grey,width: 1))
                  // ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.favorite,
                        size: 20,
                        color: Theme.of(context).iconTheme.color.withOpacity(0.7),
                      ),
                      SizedBox(width: mDefaultPadding,),
                      Text("收藏",style: Theme.of(context).textTheme.headline6,)
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.all( mDefaultPadding),
                  // decoration: BoxDecoration(
                  //     border: Border(top: BorderSide(color: Colors.grey,width: 1),bottom: BorderSide(color: Colors.grey,width: 1))
                  // ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.settings,
                        size: 20,
                        color: Theme.of(context).iconTheme.color.withOpacity(0.7),
                      ),
                      SizedBox(width: mDefaultPadding,),
                      Text("设置",style: Theme.of(context).textTheme.headline6,)
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
        body: NestedScrollView(
          headerSliverBuilder: (context, inner) {
            return [
              SliverAppBar(
                expandedHeight: 230.0,
                toolbarHeight: 0,
                pinned: true,
                flexibleSpace: Padding(
                  padding: EdgeInsets.symmetric(vertical: 1),
                  child: PageView(
                    onPageChanged: (index) {
                      setState(() {
                        page = index;
                      });
                    },
                    children: [
                      Center(
                        child: ClipRRect(
                          borderRadius: BorderRadius.all(
                              Radius.circular(mDefaultPadding / 2)),
                          child: Image.network(
                            "http://i0.hdslb.com/bfs/archive/59005ba891871a7945607a146166615d5a870094.jpg",
                            fit: BoxFit.fitWidth,
                            width: MediaQuery.of(context).size.width - 20,
                            height: 200,
                          ),
                        ),
                      ),
                      Center(
                        child: ClipRRect(
                          borderRadius:
                              BorderRadius.circular(mDefaultPadding / 2),
                          child: Image.network(
                            "http://i2.hdslb.com/bfs/archive/0c3bdd8df5d8ba112895e5553eac6b07e80c9215.jpg",
                            fit: BoxFit.fitWidth,
                            width: MediaQuery.of(context).size.width - 20,
                            height: 200,
                          ),
                        ),
                      ),
                      Center(
                        child: ClipRRect(
                          borderRadius:
                              BorderRadius.circular(mDefaultPadding / 2),
                          child: Image.network(
                            "http://i1.hdslb.com/bfs/archive/4950653b4932469a1bb98f2c83b2fc092841eb82.jpg",
                            fit: BoxFit.fitWidth,
                            width: MediaQuery.of(context).size.width - 20,
                            height: 200,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              // SliverPersistentHeader(
              //   pinned: true,
              //   delegate: StickyTabBarDelegate(
              //     child: TabBar(
              //       labelStyle: Theme.of(context).textTheme.subtitle1,
              //       controller: this._tabController,
              //       indicatorWeight: 1,
              //       indicatorPadding: EdgeInsets.all(10),
              //       indicatorColor: Theme.of(context).iconTheme.color,
              //       tabs: <Widget>[
              //         Tab(text: '推荐'),
              //         Tab(text: '技术'),
              //       ],
              //     ),
              //   ),
              // ),
            ];
          },
          body: GridView.count(
            crossAxisCount: 2,
            children: data
                .asMap()
                .keys
                .map((item) => buildItem(context, item,
                    image: data[item]["pic"],
                    title: data[item]["title"],
                    subTitle: data[item]["tname"]))
                .toList(),
          ),
        ));
  }

  Container buildItem(BuildContext context, int item,
      {String image = "", String title = "", String subTitle = ""}) {
    return Container(
      decoration: BoxDecoration(
          color: Theme.of(context).scaffoldBackgroundColor,
          borderRadius: BorderRadius.circular(mDefaultPadding / 4),
          boxShadow: [
            BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                blurRadius: 1,
                offset: Offset(1, 1))
          ]),
      margin: EdgeInsets.only(
          left: item % 2 == 0 ? mDefaultPadding / 2 : mDefaultPadding / 4,
          right: item % 2 == 0 ? mDefaultPadding / 4 : mDefaultPadding / 2,
          bottom: 10),
      child: Column(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(5), topRight: Radius.circular(5)),
            child: Image.network(
              "$image",
              width: MediaQuery.of(context).size.width / 2 - 10,
              height: 110,
              fit: BoxFit.fitWidth,
              cacheHeight: 110,
              cacheWidth: (MediaQuery.of(context).size.width / 2 - 10).toInt(),
            ),
          ),
          Expanded(
            child: Container(
              height: 50,
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Text(
                  "$title",
                  style: Theme.of(context).textTheme.subtitle2,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(
                horizontal: 10, vertical: mDefaultPadding / 4),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  constraints: BoxConstraints(maxWidth: 100),
                  child: Text(
                    "$subTitle",
                    style: TextStyle(color: Colors.grey, fontSize: 12),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                Icon(
                  Icons.more_vert,
                  size: mDefaultPadding - 5,
                  color: Theme.of(context).iconTheme.color.withOpacity(0.5),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar child;

  StickyTabBarDelegate({@required this.child});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      // color: Theme.of(context).backgroundColor,
      child: this.child,
    );
  }

  @override
  double get maxExtent => this.child.preferredSize.height;

  @override
  double get minExtent => this.child.preferredSize.height;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}
